<template>
    <div class="apply-list-view">

      <modules-title class="title-position" titleName="申请列表">

        <template slot="btn">
        </template>

      </modules-title>

      <div class="content">

        <el-table v-loading="loading" border size="medium" :data="tableData">
          <el-table-column label="申请编号" align="center" prop="change_no" width="120" />
          <el-table-column label="申请类型" align="center" width="140">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">项目基本信息</span>
              <span v-else-if="scope.row.status == 2">项目基本成员</span>
              <span v-else-if="scope.row.status == 3">任务基本信息</span>
              <span v-else-if="scope.row.status == 4">任务项目成员</span>
              <span v-else-if="scope.row.status == 5">任务全部</span>
              <span v-else-if="scope.row.status == 6">附件</span>
            </template>
          </el-table-column>
          <el-table-column label="申请人" align="center" prop="creator_name" width="120" />
          <el-table-column label="项目" align="center" prop="project_name" width="120" />
          <el-table-column label="变更原因" align="center" prop="change_cause" width="120" />
          <el-table-column label="影响程度" align="center" prop="change_level" width="120" />
          <el-table-column label="状态" align="center" width="125">
            <template slot-scope="scope">
              <span v-if="scope.row.change_status == 1">待审核</span>
              <span v-else-if="scope.row.change_status == 2">审核中</span>
              <span v-else-if="scope.row.change_status == 3">已审核</span>
              <span v-else-if="scope.row.change_status == 4">已审核失败</span>
              <span v-else-if="scope.row.change_status == 5">已审核成功</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="350">
            <template slot-scope="scope">

              <el-button
                class="text-btn-yellow"
                size="medium"
                type="text"
                icon="el-icon-order"
                @click="detailClick(scope.row.id)">
                详情
              </el-button>

              <el-button
                v-if="scope.row.change_status == 1"
                size="medium"
                type="text"
                icon="el-icon-order"
                @click="auditClick(scope.row.id)">
                审批申请
              </el-button>

            </template>
          </el-table-column>
        </el-table>

      </div>

      <el-dialog
        title="审批申请"
        :visible.sync="dialogVisible"
        width="800px"
        :before-close="handleClose">

        <audit-apply-view ref="auditView"></audit-apply-view>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogConfirm">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
  import auditApplyView from "./modules/auditApplyView";

    export default {
        name: "index",
        components:{auditApplyView},
        data:function () {
            return{
                loading:false,
                pageSize:10,
                pageNum:1,
                total:0,
                dialogVisible:false,
                tableData:[],

            }
        },
        mounted:function() {
            this.getListData()
        },
        methods:{
            handleClose:function () {
                this.dialogVisible = false;
            },
            dialogConfirm:function () {
                this.dialogVisible = true;
                if (this.$refs.auditView){

                    this.$api.PROJECT_WORK_APPLY_UPDATE(this.$refs.auditView.datas).then(res=>{
                        if (res.code == 200){
                            this.getListData();
                        }else{
                            this.$message.error(res.msg)
                        }
                    }).catch(err=>{

                    })
                }


            },
            getListData:function () {
                let data = {
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                    }
                }
                this.loading = true;
                this.$api.PROJECT_WORK_APPLY_LIST(data).then(res=>{
                    this.loading = false;
                    if (res.code == 200){
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.loading = false;
                })
            },
            auditClick:function (id) {
                let index = this.tableData.findIndex(a=>a.id == id)
                if (index != -1){
                    let data = this.tableData[index];
                    this.dialogVisible = true;
                    setTimeout(() => {
                        if (this.$refs.auditView){
                            this.$refs.auditView.setData(data);
                        }
                    },500)

                }
            },
            detailClick:function (id) {

            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../assets/scss/views/projectManagement/applyList/applyList.scss";
</style>
